<template>
    <!-- 商品组 -->
    <view class="diy-goods" :style="'background: ' + itemStyle.background + ';'">
        <view :class="'goods-list display__' + itemStyle.display + ' column__' + itemStyle.column">
            <scroll-view :scroll-x="itemStyle.display === 'slide'">
                <view class="goods-item" v-for="(dataItem, index) in dataList" :key="index">
                    <navigator hover-class="none" :url="dataItem.item_id > 0 ? '/pages/goods/detail?item_id=' + dataItem.item_id : ''">
                        <view class="goods-image">
                            <image mode="aspectFill" :src="dataItem.image"></image>
                        </view>
                        <view class="detail">
                            <view v-if="itemStyle.show.goodsName > 0" class="goods-name twolist-hidden f-30">
                                {{ dataItem.name }}
                            </view>
                            <view v-if="itemStyle.show.goodsPrice > 0" class="goods-price f-30 col-m">￥{{ dataItem.goods_price }}</view>
                        </view>
                    </navigator>
                </view>
            </scroll-view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            dataItem: {
                item_id: 0,
                image: '',
                name: '',
                goods_price: ''
            }
        };
    },
    options: {},
    /**
     * 组件的属性列表
     * 用于组件自定义设置
     */
    props: {
        itemStyle: Object,
        dataList:  Array || Object
    },
    methods: {},
    created: function () {}
};
</script>
<style>
@import './c_goods.css';
</style>
